{extend name="../../index/view/public/layout" /}
{block name="style"}
<link rel="stylesheet" href="__STATIC__/member/css/login.css">
{/block}
{block name="main-container"}
<div class="login-container">
    <div class="login-wrap">
        <div class="login-hd">
            <h3>用户登录</h3>
        </div>
        <div class="login-bd">
            <form action="{:url('/login')}" class="form-login form-input-group" method="post" id="j-form-login">
                <div class="control-group">
                    <div class="input-control">
                        <label for="mobile" class="input-group-label">
                            <img src="__STATIC__/member/img/icon-man.png" alt="">
                        </label>
                        <input type="text" name="mobile" id="mobile" placeholder="请输入11位手机号码">
                    </div>
                </div>

                <div class="control-group">
                    <div class="input-control">
                        <label for="password" class="input-group-label">
                            <img src="__STATIC__/member/img/icon-lock.png" alt="">
                        </label>
                        <input type="password" name="password" id="password" required class="" placeholder="请输入您的登录密码">
                        <input type="password" class="stealthy" style="display: none" tabindex="-1">
                    </div>
                </div>

                <div class="control-group">
                    <div class="code-group clearfix">
                        <div class="input-control">
                            <label for="captcha" class="input-group-label">
                                <img src="__STATIC__/member/img/icon-shield.png" alt="">
                            </label>
                            <input type="text" name="captcha" id="captcha" required placeholder="请输入右侧验证码">
                        </div>
                        <div class="input-control-right">
                            <img src="{:captcha_src()}" id="captcha-img" style="cursor: pointer;"
                                 onclick="this.src='{:captcha_src()}?d='+Math.random();" title="点击刷新" alt="captcha"/>
                            <span class="btn-reload">刷新</span>
                        </div>
                    </div>
                </div>
                <div class="gatherInfo">
                    <a class="link-fr" href="{:URL('/backpasswd')}">忘记密码</a>
                    <span>没有账户？<a href="{:URL('/register')}" class="text-red">马上注册</a></span>
                </div>
                <input type="submit" value="立即登录" class="btn btn-block btn-red btn-submit">
            </form>
        </div>
    </div>
</div>
{/block}
{block name="page-footer"}
{/block}
{block name="script"}
<script src="__STATIC__/libs/layer/layer.js"></script>
<script src="__STATIC__/libs/jquery-validation/jquery.validate.js"></script>
<script src="__STATIC__/libs/jquery-validation/jquery.validate.messages_zh.js"></script>

<script>
    (function ($) {
        $.validator.addMethod("telephone", function (value, element) {
            return this.optional(element) || /^1[345789]\d{9}$/.test(value);
        }, "请输入正确的手机号码");
        $.validator.addMethod("pass_strength", function (value, element) {
            return this.optional(element) || /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]{6,16}$/.test(value);
        }, "密码长度为6-16位，必须包含数字、字母");
        $("#j-form-login").validate({
            rules: {
                mobile: {
                    required: true,
                    telephone: true
                },
                password: {
                    required: true,
                    pass_strength: true //暂时不加校验，以免测试用户无法登录
                },
                captcha: {
                    required: true,
                    minlength: 4,
                    maxlength: 4
                }
            },
            messages: {
                mobile: {
                    required: "请输入手机号码",
                    telephone: "手机号码有误"
                },
                password: {
                    required: "请输入密码",
                },
                captcha: {
                    required: "请输入验证码",
                    minlength: "验证码有误",
                    maxlength: "验证码有误"
                }
            },
            submitHandler: function (form) {
                $.ajax({
                    type: "post",
                    url: $("#j-form-login").attr("action"),
                    data: {
                        mobile: $("#mobile").val(),
                        password: $("#password").val(),
                        captcha: $("#captcha").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        layer.msg(data.msg, function () {
                            $("#captcha-img").trigger("click")
                            if(data.url) window.location.href = data.url
                        })
                    }
                })
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                $(element).closest(".control-group").append(error);
            }
        });

        $(".btn-reload").on("click", function () {
            $("#captcha-img").trigger("click");
        })
    })(jQuery)
</script>
{/block}
